<template>
    <div style="height: 545px">
        <el-date-picker style="margin-bottom: 20px;"
                        v-model="statisticMonth"
                        type="daterange"
                        align="left"
                        format="yyyy-MM-dd"
                        :placeholder="$t('dashboard.selectDate')"
                        :picker-options="pickerOptions"
                        @change="choiceDate"
        >
        </el-date-picker>
        <div id="cronerChart" style="height:50%;width:100%"></div>
        <div id="runnerChart" style="height:50%;width:100%"></div>
    </div>
</template>
<script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/legend');
    require('echarts/lib/component/dataZoom');
    import common from '../../assets/script/common';
    import { mapGetters } from 'vuex';
    export default {
        name: 'barPercent',
        props: ['timingSuccess','timingFailure','runnerSuccess','runnerFailure'],
        data() {
            var _this = this;
            return {
                statisticMonth:'',
                cronerSuccessData : [],
                cronerFailData : [],
                runnerSuccessData : [],
                runnerFailData : [],

                xData:[],
                pickerOptions:{
                    shortcuts: [{
                        text: _this.$i18n.t('dashboard.recentWeek'),
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: _this.$i18n.t('dashboard.recentMonth'),
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            };
        },
        created() {
            this.defaultDate();
        },
        ...mapGetters([
            "currentLan"
        ]),
        watch:{
            currentLan:function(str) {
                this.initChart(this.cronerSuccessData,this.cronerFailData,'cronerChart',[this.timingSuccess, this.timingFailure]);
                this.initChart(this.runnerSuccessData,this.runnerFailData,'runnerChart',[this.runnerSuccess, this.runnerFailure]);
            }
        },
        methods: {
            checkMonth (num) {
                return (num+1)<10?'0'+(num+1):(num+1);
            },
            checkDate (num) {
                return num<10?'0'+num:num;
            },
            defaultDate() {
                let self = this;
                const d = new Date();
                const startTime = new Date(d.getTime()-3600 * 1000 * 24 * 1);
                const startDate = startTime.getFullYear() + '-' + (self.checkMonth(startTime.getMonth())) + '-' + (self.checkDate(1));
                const endDate = startTime.getFullYear() + '-' + (self.checkMonth(startTime.getMonth())) + '-' + (self.checkDate(d.getDate()));
                this.getMissionStatistics(startDate,endDate,d.getMonth());
            },
            choiceDate() {
                let self = this;
                if(self.statisticMonth[0] !== null){
                    const startChoiceDate = new Date(self.statisticMonth[0]);
                    const endChoiceDate = new Date(self.statisticMonth[1]);
                    const beginDate = startChoiceDate.getFullYear() + '-' + (self.checkMonth(startChoiceDate.getMonth())) + '-' + (self.checkDate(startChoiceDate.getDate()));
                    const endDate = endChoiceDate.getFullYear() + '-' + (self.checkMonth(endChoiceDate.getMonth())) + '-' + (self.checkDate(endChoiceDate.getDate()));
                    self.getMissionStatistics(beginDate,endDate,endChoiceDate.getMonth());
                }else {
                    self.defaultDate();
                }


            },
            getMissionStatistics(beginDate,endDate,thisMonth) {
                let self = this;
                common.getOtherAjax(self,'/api/homepage/loadMonth',{beginDate,endDate},(res) => {
                    if(res.data.status === 401){
                        common.refreshToken(self, (token) => {
                            sessionStorage.setItem("token",token);
                            self.getMissionStatistics(beginDate,endDate,thisMonth);
                        });
                    }else{
                        if(JSON.stringify(res.data) !== "{}"){
                            const data = [];
                            const cronerSuccessData = [];
                            const cronerFailData = [];
                            const runnerSuccessData = [];
                            const runnerFailData = [];
                            const cronerTable = res.data.CronerTable;
                            const runnerTable = res.data.RunnerTable;
                            const _len = cronerTable.length;
                            for (let i = 0; i < _len; i++) {
                                data.push(cronerTable[i][0].substring(5,10));
                                if(cronerTable[i][2] === null && cronerTable[i][3] === null) {
                                    cronerFailData.push(0);
                                    if(cronerTable[i][1] === null){
                                        cronerSuccessData.push(0);
                                    }else{
                                        cronerSuccessData.push(cronerTable[i][1]);
                                    }
                                }else if(cronerTable[i][2] !== null && cronerTable[i][3] === null){
                                    cronerSuccessData.push(cronerTable[i][2]);
                                    cronerFailData.push(0);
                                }else if(cronerTable[i][2] === null && cronerTable[i][3] !== null){
                                    cronerSuccessData.push(0);
                                    cronerFailData.push(cronerTable[i][3]);
                                }else if(cronerTable[i][2] !== null && cronerTable[i][3] !== null){
                                    cronerSuccessData.push(cronerTable[i][2]);
                                    cronerFailData.push(cronerTable[i][3]);
                                }
                                if(runnerTable[i][2] === null && runnerTable[i][3] === null) {
                                    runnerFailData.push(0);
                                    if(runnerTable[i][1] === null){
                                        runnerSuccessData.push(0);
                                    }else{
                                        runnerSuccessData.push(runnerTable[i][1]);
                                    }
                                }else if(runnerTable[i][2] !== null && runnerTable[i][3] === null){
                                    runnerSuccessData.push(runnerTable[i][2]);
                                    runnerFailData.push(0);
                                }else if(runnerTable[i][2] === null && runnerTable[i][3] !== null){
                                    runnerSuccessData.push(0);
                                    runnerFailData.push(runnerTable[i][3]);
                                }else if(runnerTable[i][2] !== null && runnerTable[i][3] !== null){
                                    runnerSuccessData.push(runnerTable[i][2]);
                                    runnerFailData.push(runnerTable[i][3]);
                                }

                            }
                            self.cronerSuccessData = cronerSuccessData;
                            self.cronerFailData = cronerFailData;
                            self.runnerSuccessData = runnerSuccessData;
                            self.runnerFailData = runnerFailData;
                            self.xData = data;
                            self.initChart(cronerSuccessData,cronerFailData,'cronerChart',[self.timingSuccess, self.timingFailure]);
                            self.initChart(runnerSuccessData,runnerFailData,'runnerChart',[self.runnerSuccess, self.runnerFailure]);
                        }else{
                            self.$message.error(self.$i18n.t('dashboard.noDataInThisTime'));
                        }
                    }
                });
            },
            initChart(successData,failData,_id,_nameData) {
                let self = this;
                this.chart = echarts.init(document.getElementById(_id));
                this.chart.setOption({
                    backgroundColor: '#344b58',
                    title: {
                        text: '',
                        x: '4%',
                        y: '2%',
                        textStyle: {
                            color: '#fff',
                            fontSize: '22'
                        },
                        subtextStyle: {
                            color: '#90979c',
                            fontSize: '16'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    grid: {
                         borderWidth: 0,
                         top: 25,
                         bottom: 95,
                         height: 200,
                         textStyle: {
                            color: '#fff'
                         }
                     },
                    /*grid: [
                        {x: '7%', y: '7%', width: '100%', height: '38%'},
//                        {x2: '7%', y: '7%', width: '38%', height: '38%'},
                        {x: '7%', y2: '7%', width: '100%', height: '38%'}
//                        {x2: '7%', y2: '7%', width: '38%', height: '38%'}
                    ],*/
                    legend: {
                        x: '10%',
                        top: '0',
                        textStyle: {
                            color: '#90979c'
                        },
                        data: _nameData
                    },
                    calculable: true,
                    xAxis: [{
                        gridIndex: 0,
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#90979c'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0

                        },
                        data: self.xData
                    }],
                    yAxis: [{
                        gridIndex: 0,
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#90979c'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0
                        },
                        splitArea: {
                            show: false
                        }
                    }],
                    dataZoom: [{
                    type: 'slider',
                     height: 15,
                     xAxisIndex: [
                     0
                     ],
                     bottom: 10,
                     start: 0,
                     end: 40,
                     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                     handleSize: '110%',
                     handleStyle: {
                     color: '#d3dee5'

                     },
                     textStyle: {
                     color: '#fff' },
                     borderColor: '#90979c'


                     }],
                    series: [
                        {
                            name: _nameData[1],
                            type: 'line',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            stack: '总量',
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: 'rgba(255,144,128,1)',
                                    barBorderRadius: 0,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter(p) {
                                            return p.value > 0 ? p.value : '';
                                        }
                                    }
                                }
                            },
                            data: failData
                        },{
                            name: _nameData[0],
                            type: 'line',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            stack: '总量',
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,191,183,1)',
                                    barBorderRadius: 0,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter(p) {
                                            return p.value > 0 ? p.value : '';
                                        }
                                    }
                                }
                            },
                            data: successData
                        }]
                })
            }
        }
    }
</script>
